import React, { PureComponent } from 'react'
import {
  Button, Form, Input, message, Modal, Spin, Tabs, Select, Popconfirm,
} from 'antd'
import styles from './index.less'
import {
  ProTableOperate, ProTable,
} from '@/components'
import {
  getProjectList, getRoleList, getUserList,
} from './api'

const { Item } = Form
const tabArr = [{ name: '日志审计', disabled: false }]
const { OperateItem } = ProTableOperate
const { TabPane } = Tabs
const { Option } = Select
export default class Matrix extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      columns: [
        {
          title: '操作',
          dataIndex: 'operateType',
          key: 'operateType',
        },
        {
          title: '操作类型',
          dataIndex: 'secoMenu',
          key: 'secoMenu',
        },
        {
          title: '所属模块',
          dataIndex: 'mainMenu',
          key: 'mainMenu',
        },
        {
          title: '所属项目',
          dataIndex: 'projectName',
          key: 'projectName',
        },
        {
          title: '详细信息',
          dataIndex: 'logInfo',
          key: 'logInfo',
        },
        {
          title: '用户类型',
          dataIndex: 'projectRoleNames',
          key: 'projectRoleNames',
        },
        {
          title: '操作人员',
          dataIndex: 'userName',
          key: 'userName',
        },
        {
          title: 'IP',
          dataIndex: 'ip',
          key: 'ip',
        },
        {
          title: '操作时间',
          dataIndex: 'createTime',
          key: 'createTime',
        },
        {
          title: '操作结果',
          dataIndex: 'result',
          key: 'result',
        },
      ],
      activeKey: undefined,
      projectList: [],
      userList: [],
    }
    this.form = React.createRef()
    this.tableRef = React.createRef()
  }

  componentDidMount() {
    getProjectList().then((res) => {
      this.setState({
        projectList: res.data || [],
      })
    })
    getUserList().then((res) => {
      this.setState({
        userList: res.data || [],
      })
    })
    getRoleList().then((res) => {
      this.setState({
        roleList: res.data || [],
      })
    })
  }

  getLists = () => {
    this.form.current.validateFields().then(values => {
      this.tableRef?.current?.resetPageNum()
      this.setState({
        visible: false,
        query: {
          operateType: values.operateType || '',
          projectId: values.projectId || '',
          secoMenu: values.secoMenu || '',
          mainMenu: values.mainMenu || '',
          roleName: values.roleName || '',
          ip: values.ip || '',
          userId: values.userId || '',
          result: values.result || '',
        },
      })
    })
  }

  render() {
    const {
      activeKey, columns, visible, projectList, userList, roleList, query,
    } = this.state
    return (
      <div className={`${styles.page_content_with_breadcrumb} ${styles.page_content_tabs_height}`}>
        <Tabs
          defaultActiveKey="1"
          type="card"
          onChange={this.onTabsChange}
          activeKey={activeKey}
          className={styles.page_content_tabs}
        >
          {
            tabArr.map((item, index) => (
              <TabPane disabled={item.disabled} tab={item.name} key={`${index + 1}`}>
                <div className={styles.page_content}>
                  <div className={styles.page_content_right}>
                    <ProTableOperate
                      toggleOperate={false}
                      unfolded
                    >
                      <OperateItem itemType="btn">
                        {
                          [
                            <Button
                              type="primary"
                              onClick={() => {
                                this.setState({
                                  visible: true,
                                })
                              }}
                            >
                              自定义筛选
                            </Button>,
                            <a
                              download
                              href={`${window.suanpan}/api/v1/secret/log/downLoad`}
                              className={styles.downLoad}
                            >
                              <Button
                                type="primary"
                                onClick={() => {
                                }}
                              >下载</Button>

                            </a>,
                          ]
                        }
                      </OperateItem>
                    </ProTableOperate>
                    <ProTable
                      query={query}
                      columns={columns}
                      ref={this.tableRef}
                      loading={false}
                      url="/api/v1/secret/log/page"
                    />
                  </div>
                </div>

              </TabPane>
            ))
          }
        </Tabs>
        <Modal
          title="自定义筛选"
          visible={visible}
          width={520}
          onCancel={() => {
            this.form.current && this.form.current.resetFields()
            this.setState({
              visible: false,
              query: {},
            })
          }}
          maskClosable={false}
          onOk={this.getLists}
        >
          <Form
            ref={this.form}
            labelCol={{ span: 5 }}
            wrapperCol={{ span: 19 }}
            initialValues={{
              abled: true,
            }}
          >
            <Item
              label="操作"
              name="operateType"
              rules={[{ required: false, message: '请输入操作' }]}
            >
              <Input
                allowClear
                placeholder="请输入操作"
              />
            </Item>
            <Item
              label="所属空间"
              name="projectId"
              rules={[{ required: false }]}
            >
              <Select
                placeholder="请选择所属空间"
                showSearch
                allowClear
                filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
              >
                {
                  projectList && projectList.map((item, index) => (
                    <Option
                      value={item.id}
                      key={index}
                    >
                      {item.name}
                    </Option>
                  ))
                }
              </Select>
            </Item>
            <Item
              label="操作类型"
              name="secoMenu"
              rules={[{ required: false }]}
            >
              <Input allowClear placeholder="请输入操作类型" />
            </Item>
            <Item
              label="所属模块"
              name="mainMenu"
              rules={[{ required: false }]}
            >
              <Input allowClear placeholder="请输入所属模块" />
            </Item>
            <Item
              label="用户类型"
              name="roleName"
              rules={[{ required: false }]}
            >
              <Select
                placeholder="请选择用户类型"
                showSearch
                allowClear
                filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
              >
                {
                  roleList && roleList.map((item, index) => (
                    <Option
                      value={item}
                      key={index}
                    >
                      {item}
                    </Option>
                  ))
                }
              </Select>
            </Item>
            <Item
              label="IP"
              name="ip"
              rules={[{ required: false }]}
            >
              <Input allowClear placeholder="请输入ip" />
            </Item>
            <Item
              label="操作人员"
              name="userId"
              rules={[{ required: false }]}
            >
              <Select
                placeholder="请选择操作人员"
                showSearch
                allowClear
                filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
              >
                {
                  userList && userList.map((item, index) => (
                    <Option
                      value={item.id}
                      key={index}
                    >
                      {item.username}
                    </Option>
                  ))
                }
              </Select>
            </Item>
            <Item
              label="操作结果"
              name="result"
              rules={[{ required: false }]}
            >
              <Select
                placeholder="请选择操作结果"
                showSearch
                allowClear
                filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
              >
                <Option
                  value="成功"
                  key="成功"
                >
                  成功
                </Option>
                <Option
                  value="失败"
                  key="失败"
                >
                  失败
                </Option>
                <Option
                  value="密级不符"
                  key="密级不符"
                >
                  密级不符
                </Option>
              </Select>
            </Item>
          </Form>
        </Modal>
      </div>
    )
  }
}
